﻿@{
    Layout = null;
}

@model LoginModel
<!DOCTYPE html>
<html>
<head>
    <title>金帆电源_系统登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="~/css/AdminLTE.css">
    <link rel="stylesheet" href="~/lib/iCheck/skins/square/blue.css">
    <link href="~/css/FontStyle.css" rel="stylesheet" />
    <style>
        #div2 {
            transform: rotateX(180deg);
            -webkit-transform: rotateY(180deg); /* Safari and Chrome */
            -moz-transform: rotateY(180deg); /* Firefox */
            -ms-transform: rotateY(180deg);/*IE9*/
        }
    </style>
</head>
<body class="hold-transition login-page" style="background: url(/images/stardust.png);">
    <div class="login-box">
        <div class="login-logo">
            <a href="#"><b class="masked">金帆电源</b></a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body" id="loginbox">
            <p class="login-box-msg"></p>
            <input id="errorInfo" type="hidden" value="@ViewBag.ErrorInfo" />
            <div id="div1"  style="display:black;">
                <form asp-controller="Login" asp-action="Index" method="post" onsubmit="onSubmit()">
                    <div class="form-group has-feedback">
                        <input asp-for="UserName" type="text" value="" class="form-control" placeholder="账号">
                        <span class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input asp-for="Password" type="password" value="" class="form-control" placeholder="密码">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                    <div class="row">
                        <div class="col-xs-4">
                            <div class="checkbox icheck">
                                <label>
                                    <input asp-for="RememberMe" checked type="checkbox"> 记住我
                                </label>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <a id="aLogin" href="/Login/YKlogin" class="btn btn-default btn-block btn-flat">游客登录</a>
                        </div>
                        <!-- /.col -->
                        <div class="col-xs-4">
                            <button id="btnLogin" type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
                        </div>
                        <!-- /.col -->
                    </div>
                    <div class="row">
                        <div class="col-xs-8"></div>
                        <div class="col-xs-4" style="text-align:right;"><a onclick="showfind();" style="cursor:pointer;">忘记密码？</a></div>
                    </div>
                </form>
            </div>
            <div id="div2"  style="display:none">
                <div class="form-group has-feedback">
                    <input id="loginName" type="text" value="" class="form-control" placeholder="账号">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="email" type="text" value="" class="form-control" placeholder="邮箱">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="row" style="height:43px;">
                    <div class="col-xs-3"></div>
                    <div class="col-xs-4">@*<button id="backlogin" type="button" class="btn btn-default btn-block btn-flat" onclick="showlogin();">返回登录</button>*@</div>
                    <div class="col-xs-5"><button id="findpw" type="button" class="btn btn-primary btn-block btn-flat">发送验证码</button></div>
                </div>
                <div class="row">
                    <div class="col-xs-8"></div>
                    <div class="col-xs-4" style="text-align:right;"><a onclick="showlogin();" style="cursor:pointer;">返回登录</a></div>
                </div>
            </div>
        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/B-JUI/js/jquery-1.11.3.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/lib/iCheck/icheck.js"></script>
    <script src="~/lib/layer/layer.js"></script>
    <script src="~/lib/jquery.cookie/src/jquery.cookie.js"></script>
    <script>
        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });

            //显示服务端验证的错误信息
            if ($("#errorInfo").val()) {
                layer.tips($("#errorInfo").val(), "#btnLogin");
            };

            //判断之前是否有设置cookie，如果有，则设置【记住我】选择框
            if ($.cookie("fonour_userName") != undefined) {
                $("#RememberMe").attr("checked", "checked");
            }
            else {
                $("#RememberMe").removeAttr("checked");
            }
            //读取cookie
            if ($("#RememberMe:checked").length > 0) {
                $("#UserName").val($.cookie("fonour_userName"));
                $("#Password").val($.cookie("fonour_password"));
            }
        });
        //根据是否勾选记住我记录或清除cookie
        function onSubmit() {
            if ($("#RememberMe:checked").length > 0) {//设置cookie
                $.cookie("fonour_userName", $("#UserName").val());
                $.cookie("fonour_password", $("#Password").val());
            } else {//清除cookie
                $.removeCookie("fonour_userName");
                $.removeCookie("fonour_password");
            }
        };

        //function showfind()
        //{
        //    $("#loginbox").hide(1000, function () {
        //        $("#findbox").show(500);
        //    });
        //}
        //function showlogin() {
        //    $("#findbox").hide(1000, function () {
        //        $("#loginbox").show(500);
        //    });
        //}

        var wait = 60;

        function towait() {
            if (wait == 0) {
                $("#findpw").removeAttr("disabled");
                $("#findpw").html("发送验证码");
                wait = 60;
            } else {
                $("#findpw").attr("disabled", true);
                $("#findpw").html("重新发送(" + wait + "s)");
                wait--;
                // setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
                setTimeout(function () {         // 定时执行
                    towait();
                }, 1000);
            }
        }   

        var csrftoken = $.cookie('csrftoken');

        $("#findpw").click(function () {
            if ($("#email").val() == "" || $("#loginName").val() == "") {
                layer.tips("账号与邮箱必填！", "#findpw");
            }
            else{
                $.ajax({
                    type: 'POST',
                    url: '/Login/SendEmail',
                    dataType: 'json',
                    data: {
                        'email': $("#email").val(),
                        'loginname': $("#loginName").val()
                    },
                    beforeSend: function () {
                        towait();
                    },
                    success: function (data) {
                        if (data.IsError) {
                        }
                        else {
                            layer.tips(data.Message, "#findpw");
                        }
                    },
                    error: function () {
                        // 请求错误处理
                        layer.tips(" 通讯失败", "#findpw");
                    }
                });
            }
        });
    </script>
    <script>
        function showfind() {
            $("#div1").fadeOut(0, function () {
                rotateYDIV();
                $("#div2").fadeIn(500);
            });
        }
        function showlogin() {
            $("#div2").fadeOut(0, function () {
                rotateYDIV();
                $("#div1").fadeIn(500);
            });
        }

        var x, y, n = 0, ny = 0, rotINT, rotYINT
        function rotateYDIV() {
            y = document.getElementById("loginbox")
            clearInterval(rotYINT)
            rotYINT = setInterval("startYRotate()", 10)
        }

        function startYRotate() {
            ny = ny + 5
            y.style.transform = "rotateY(" + ny + "deg)"
            y.style.webkitTransform = "rotateY(" + ny + "deg)"
            y.style.OTransform = "rotateY(" + ny + "deg)"
            y.style.MozTransform = "rotateY(" + ny + "deg)"
            if (ny == 180 || ny >= 360) {
                clearInterval(rotYINT)
                if (ny >= 360) { ny = 0 }
            }
        }
    </script>
</body>
</html>

